
import './get.css'
import { useNavigate } from 'react-router-dom'
import React, { useMemo, useState } from 'react';
import { Button, ColorPicker } from 'antd';
import type { ColorPickerProps, GetProp } from 'antd';
const Gtters: React.FC = () => {
    type Color = Extract<GetProp<ColorPickerProps, 'value'>, string | { cleared: any }>;
    const [color, setColor] = useState<Color>('#ccc');

    const bgColor = useMemo<string>(
        () => (typeof color === 'string' ? color : color!.toHexString()),
        [color],
    );

    const btnStyle: React.CSSProperties = {
        backgroundColor: bgColor,
    };

     const navigate = useNavigate();
    const div1=()=>{
       navigate(`/home/color`)
       console.log(111)
    }
  return (
    <div className='boxcss'>
      <div className="boxcss-top">
        <img src="../src/assets/images/sheji.png" alt="" />
        <div className="chinajs">
            <span>当前位置</span>&emsp;<span>广告设计</span>&emsp;<span>共<b>830234个结果</b></span>
            <div className="china-right">
                <input type="text" placeholder='输入关键词，在“广告设计” 分类页下检索'/><button>搜索</button>
            </div>
        </div>
        <div className="rulere">
            <span>场景：</span>
            <ul>
                <li>全部</li>
                <li>海报</li>
                <li>展板</li>
                <li>节日海报</li>
                <li>背景</li>
                <li>元素</li>
                <li>易拉宝</li>
                <li>包装</li>
                <li>样机</li>
                <li>宣传单</li>
                <li>名片卡券</li>
                <li>艺术字</li>
                <li>LOGO</li>
                <li>3D海报</li>
                <li>其他</li>
                <li>国外海报</li>
                <li>画册</li>
                <li>证书</li>
                <li>企业套图</li>
                <li>软件工具</li>
            </ul>
        </div>
        <div className="ruleres">
            <span>板式：</span>
            <ul>
                <li>全部</li>
                <li>横图</li>
                <li>竖图</li>
            </ul>
        </div>
      </div>
      <div className="cool">
        <span>颜色搜索</span>
        <div onClick={div1}>
            {/* <RouterLink to="/home"></RouterLink> */}
        </div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <div onClick={div1}></div>
        <b>
            <ColorPicker value={color} onChange={setColor}>
                <Button type="primary" style={btnStyle}>
                    <p>...</p>
                </Button>
            </ColorPicker>
        </b>
        <span>点击左侧色块，选取不同颜色试试吧~</span>
      </div>
      <div className="fotercer">
        <div className="cutter-top">
            <div className='left-ce'>
                排序方式：
                <ul>
                    <li>综合排序</li>
                    <li>热门下载</li>
                    <li>最新上传</li>
                    <li>昨日热图</li>
                </ul>
            </div>
            <div className='left-ye'>
                <span>|</span>
                <span>素材类型:</span>
                <span><input type="checkbox" />包图自产</span>
                <span><input type="checkbox" />创意专享</span>
                <span><input type="checkbox" />创意Pro</span>
            </div>
        </div>
        <div className="footerever">
            <div className="footerheader">
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
                <div className="celles">
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                    <div className="ceel">
                        <img src="https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg" alt="" />
                    </div>
                </div>
            </div>
        </div>
      </div>
      <div className="bottonces">
        <div className="footer-topp">
            <span>今日新图</span>
            <span>|</span>
            <span>专题图片</span>
            <span>|</span>
            <span>图片素材</span>
            <span>|</span>
            <span>售后服务</span>
            <span>|</span>
            <span>关于我们</span>
            <span>|</span>
            <span>联系我们</span>
            <span>|</span>
            <span>加入我们</span>
            <span>|</span>
            <span>帮助中心</span>
            <span>|</span>
            <span>在线客服</span>
            <span>|</span>
            <span><img src="../src/assets/images/xinxi.png" alt="" /></span>
            <span>|</span>
            <span><img src="../src/assets/images/zhongyang.png" alt="" /></span>
        </div>
        <div className="footer-centerp">
            <p>Copyright © 2016-2024 包图网ibaotu.com 版权所有 &emsp; 沪ICP备16053114号-2 ICP证沪B2-20180032 沪公京安备31011502400137号 &emsp; 上海工商</p>
            <p>广播电视节目制作经营许可证(沪)字第03172号 &emsp; 网络文化经营许可证 沪文网[2019]2346-159号 &emsp; 出版物经营许可证新出发沪批字第Y8311号&emsp;《包图网络服务使用协议》&emsp;《包图隐私政策》</p>
            <p>为了防范电信网络诈骗，如接到962110来电，请立即接听 违法和不良信息举报电话：021-31770313 邮箱: kf@ibaotu.com</p>
        </div>
      </div>
    </div>
  )
}

export default Gtters
